<template>
  <div class="about">
    <h1>关于组件</h1>
    <h1>使用vuex的数据:{{$store.state.count}}</h1>
    <h1>渲染布尔值{{$store.state.flag}}</h1>
    <h1>使用vuex中的getters:{{$store.getters.myage}}</h1>
    <button @click="plus">每次加10</button>
    <button @click="$store.dispatch('flagChangeActions',true)">改变flag值 通过actions</button>
    <hr>
    <h1>getters使用</h1>
    <h1>{{username}}</h1>
    <h1>{{movies}}</h1>
    <button @click="changeMov">点击改变电影</button>
  </div>
</template>
<script>
// mapGetters  辅助函数导入 getters 到计算属性
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: "about",
  data () {
    return {
      myage: 88
    }
  },
  computed: {
    // 使用mapGetters 属性 导入getters到计算属性
    ...mapGetters(['username', 'movies']),
    newage () {
      return this.myage * 10
    }
  },
  methods: {
    // 用辅助函数法 注入 mutations 中的函数
    ...mapMutations(["changeMovies", "changeFlag"]),
    plus () {
      // 在关于组件触发mutations中的函数 改变state的count
      this.$store.commit("changeCount", 10)
    },
    changeMov () {
      // this.$store.commit("changeMovies", "沐浴之王");
      this.changeMovies("你好，李焕英");

    }
  },
}
</script>
